<template>
  <div
    class="x-menu-item"
    :class="{
      'u-actived': activedMenu === index,
      'u-disabled': isDisabled,
    }"
  >
    <div class="u-title" @click="clickTitle">
      <slot name="title"></slot>
    </div>
  </div>
</template>

<script setup name="XMenuItem">
import { inject } from 'vue'

const props = defineProps({
  index: [String, Number], // 唯一id
  isDisabled: Boolean,
})

const { activedMenu, select } = inject('rootMenu', {})

function clickTitle() {
  select(props.index)
}
</script>

<style lang="scss" scoped>
.x-menu-item {
  .u-title {
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background-color: var(--el-menu-hover-bg-color);
    }
  }
  &.u-actived {
    .u-title {
      color: var(--el-color-primary);
    }
  }
}
</style>
